<template>
  <div :class="$style.addOrEdit">
    <Button :type="type" @click="openClickHandle">{{ label }}</Button>
    <el-dialog :visible.sync="visible" :title="title" :close-on-click-modal="false" @closed="closedHandle" @open="openHandle" @opened="openedHandle">
      <FormContainer :column="1">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
          <el-form-item prop="indexId" label="标签类别">
            <SearchSelectPicker
              ref="select"
              :value.sync="formData.indexId"
              url="/call-center/api/v1/appraise/appraiseIndex/page"
              :params="{query:{state:1},type:0}"
              value-name="id"
              lable-name="indexName"
              placeholder="请选择标签类别"
              :disabled="isEdit"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="isGood" label="标签标识">
            <el-select v-model="formData.isGood" placeholder="请选择标签标识" clearable>
              <el-option :value="1" label="好评"></el-option>
              <el-option :value="0" label="差评"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="tagName" label="标签内容">
            <el-input v-model.trim="formData.tagName" placeholder="请输入标签内容" clearable></el-input>
          </el-form-item>
          <el-form-item prop="orderNumber" label="排序">
            <el-input v-model="formData.orderNumber" v-number-input placeholder="请输入排序号" clearable></el-input>
          </el-form-item>
          <el-form-item prop="state" label="启用状态">
            <el-radio-group v-model="formData.state">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <Button type="primary" @click="cancelHandle">取消</Button>
            <Button type="primary" @click="confirmHandle">确定</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { addAppraiseTag, editAppraiseTag } from '@/api/serviceQuality'
export default {
  name: 'AddOrEdit',
  components: {
    FormContainer,
    SearchSelectPicker
  },
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    label: {
      type: String,
      default: '新增'
    },
    title: {
      type: String,
      default: '新增'
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    selected: {
      type: [Array],
      default: () => []
    }
  },
  data() {
    const validatorTagName = (r, v, c) => {
      c()
      // if (v.length > 4) {
      //   c(new Error('最多4个字符'))
      // } else {
      //   c()
      // }
    }
    return {
      visible: false,
      formData: {
        indexId: '',
        isGood: '',
        tagName: '',
        orderNumber: '',
        state: 1
      },
      formRules: {
        indexId: { required: true, message: '请选择类别', trigger: 'change' },
        isGood: { required: true, message: '请选择标识', trigger: 'change' },
        tagName: [{ required: true, message: '请输入标签内容', trigger: 'change' },
          { required: true, validator: validatorTagName, trigger: 'change' }],
        state: { required: true, message: '请选择启用状态', trigger: 'change' }
      }
    }
  },
  methods: {
    openClickHandle() {
      if (this.isEdit) {
        this.$checkSelected(this.selected).then(() => {
          this.visible = true
        })
      } else {
        this.visible = true
      }
    },
    openHandle() {
      if (this.isEdit) {
        for (const [key, value] of Object.entries(this.selected[0])) {
          this.$set(this.formData, key, value)
        }
      }
    },
    openedHandle() {
      this.$refs.select.remoteMethod('')
    },
    closedHandle() {
      this.$refs.form.resetFields()
    },
    cancelHandle() {
      this.visible = false
    },
    confirmHandle() {
      return this.$refs.form.validate().then(() => {
        let ajax = addAppraiseTag
        if (this.isEdit) {
          ajax = editAppraiseTag
        }
        return ajax(this.formData).then(res => {
          this.$message.success('操作成功！')
          this.visible = false
          this.$emit('refresh')
        })
      })
    }
  }
}
</script>
<style lang="scss" module>
.addOrEdit{
  display: inline-block;
  text-align: left;
  margin:0 10px;
  & span{
    display: inline-block !important;
  }
}
.addOrEdit + .addOrEdit{
  margin-left: 0 !important;
}
</style>
